<template>
<div class="slider">
<span class="sliderToggle" style="" :title='title' @click="toggleClass()" ><i :class="elClass"></i></span>
<el-menu default-active="2" class="el-menu-vertical-demo" mode='vertical' :collapse="isCollapse">
  <!-- <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">快速导航</span>
    </template>
    <el-menu-item-group>
      <span slot="title">报表导航</span>
      <el-menu-item index="1-1">我的报表</el-menu-item>
      <el-menu-item index="1-2">查看筛选项</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-3">
      <span slot="title">选项3</span>
      <el-menu-item index="1-3-1">选项1</el-menu-item>
    </el-submenu>
  </el-submenu> -->
  <router-link to="/home/leaderDrive">
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">领导驾驶舱</span>
    </el-menu-item>
  </router-link>
  <router-link to="/home/view">
    <el-menu-item index="2">
      <i class="el-icon-document"></i>
      <span slot="title">指标看板</span>
    </el-menu-item>
  </router-link>
  <router-link to="/home/personalData">
    <el-menu-item index="3">
      <i class="el-icon-news"></i>
      <span slot="title">个人数据管理</span>
    </el-menu-item>
  </router-link>
  <router-link to="/home/feedBack">
    <el-menu-item index="4">
      <i class="el-icon-service"></i>
      <span slot="title">意见反馈</span>
    </el-menu-item>
  </router-link>
</el-menu>

  </div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 160px;
  min-height: 400px;
}
.slider {
  position: relative;
  overflow: hidden;
}
.sliderToggle {
  padding: 15px 3px;
  vertical-align: middle;
  display: inline-block;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  font-weight: 800;
  background-color: #ccc;
  border-radius: 6px;
  cursor: pointer;
}
.sliderToggle i {
  font-weight: 800 !important;
  font-size: 0.18rem;
}
.el-menu-item,
.el-submenu {
  text-align: left;
  border-bottom: 1px solid #ccc;
  color: #909399;
}
</style>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      elClass: "el-icon-arrow-right",
      title: "展开导航"
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toggleClass() {
      this.isCollapse = !this.isCollapse;
      this.elClass =
        this.isCollapse == true ? "el-icon-arrow-right" : "el-icon-arrow-left";
      this.title = this.isCollapse == true ? "展开导航" : "收起导航";
    }
  }
};
</script>